.button {
  --btn-color: #a9bacb;

  width: 24px;
  height: 24px;
  padding: 4px;
  min-height: 24px;
  min-width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  color: var(--btn-color);
  outline: none;
}

.button:hover {
  color: var(--btn-color-hover);
}
.button:active {
  color: var(--btn-color-active);
}

.button p {
  flex-shrink: 0;
  line-height: 1;
}

.button span {
  box-sizing: border-box;
  width: initial;
  height: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;

  transition: color 0.2s ease;
}

.button span svg {
  max-width: 100%;
  height: 100%;
}

.base {
  --btn-color: #8696a6;
  --btn-color-hover: #384455;
  --btn-color-active: #8696a6;
}

.primary {
  --btn-color: #e6eef5;
  --btn-color-hover: #8696a6;
  --btn-color-active: #384455;
}

.secondary {
  --btn-color: #f1f5f7;
  --btn-color-hover: #acb3c7;
  --btn-color-active: #8696a6;
}
.darkPrimary {
  --btn-color: #2e2e2e;
  --btn-color-hover: #333333;
  --btn-color-active: #646464;
}

.accent {
  --btn-color: #acb3c7;
  --btn-color-hover: #232223;
  --btn-color-active: #2193b0;
}

.darkAccent {
  --btn-color: #8696a6;
  --btn-color-hover: #acb3c7;
  --btn-color-active: #2193b0;
}

.selected {
  color: var(--btn-color-active);
}
.button:hover.selected {
  color: var(--btn-color-active);
}
.button:hover.selected.underline {
  border-bottom-color: var(--btn-color-active);
}

.underline {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}
.underline:hover {
  border-bottom-color: var(--btn-color-hover);
}
.underline:active {
  border-bottom-color: var(--btn-color-active);
}

/* 

.primary:hover {
  background-color: #005f6b;
}

.secondary {
  background-color: white;
  color: black;
  border: 2px solid #008cba;
}

.secondary:hover {
  background-color: #008cba;
  color: white;
}

.success {
  background-color: #4caf50;
  color: white;
}

.success:hover {
  background-color: #2e7d32;
}

.danger {
  background-color: #f44336;
  color: white;
}

.warning {
  background-color: #ff9800;
  color: white;
}

.small {
  font-size: 12px;
}

.medium {
  font-size: 16px;
}

.large {
  font-size: 20px;
}

.button:disabled {
  background-color: #cccccc;
  color: #666666;
}

.topAccent {
  border-top: 4px solid purple;
  border-radius: 0;
}

.leftAccent {
  border-left: 4px solid purple;
  border-radius: 0;
}

.arrow {
  display: inline-flex;
  align-items: center;
}

.arrow::after {
  content: '\2192';
  margin-left: 1em;
} */
